<template>
  <div class="w-full h-full relative">
    <div class="cont absolute">
      <div class="title">火灾报警</div>
      <div class="row">
        <span>出入口1火灾报警</span>
        <span>正常</span>
        <a-button type="primary" @click="alit(1)">开启</a-button>
      </div>
      <div class="row">
        <span>设备层1火灾报警</span>
        <span class="warn">报警</span>
        <a-button type="primary" @click="alit(0)">关闭</a-button>
      </div>
      <div class="row">
        <span>站台层1火灾报警</span>
        <span>正常</span>
        <a-button type="primary" @click="alit(1)">开启</a-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Modal } from "ant-design-vue";

function alit(type) {
  Modal.confirm({
    title: "提醒：",
    content: `确定要${type === 1 ? "开启" : "关闭"}火灾报警吗？`,
    onOk() {},
    onCancel() {}
  });
}
</script>
<style scoped lang="less">
.cont {
  left: 80px;
  top: 200px;

  .title {
    margin-bottom: 40px;
  }
  .row {
    display: flex;
    span:first-child {
      line-height: 30px;
      margin-right: 10px;
      margin-bottom: 30px;
    }
    span:nth-child(2) {
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 30px;
      border: 1px solid #ffffff;
      border-radius: 5px;
      margin-right: 10px;
      background-color: #ffffff;
      color: #000;
    }
    .warn {
      border: 1px solid red !important;
      color: red !important;
    }
  }
}
</style>
